<template>
	<view class="container">
		<view class="inner">
			<view class="award-list">
				<view class="award-item" v-for="(item,index) in awardList" :key="index" @click="toUrl(item)">
					<image class="award-img" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1dcb5f8d-0864-4423-91f8-ae507999d5e9.png"></image>
					<view class="desc">
						<text class="award-name">{{ item.awardName }}</text>
						<text class="award-time">{{ item.createdAt }}</text>
					</view>
				</view>
			</view>
			<gzListNull :list="awardList"></gzListNull>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { $getFansAwardByActivityId } from '@/http/apiManager.js'
	
	onLoad(({ activityId }) => {
		getAwardList(activityId)
	})
	
	// 奖品列表
	const awardList = ref([])
	
	
	// 请求奖品记录
	async function getAwardList(activityId){
		uni.showLoading({ title: '加载中...' })
		const { bizData } = await $getFansAwardByActivityId(activityId)
		uni.hideLoading()
		awardList.value = bizData
	}
	
	// 奖品详情跳转
	function toUrl(item){
		const { awardId, awardType, fansAwardId } = item
		let jumpUrl = ''	// 跳转的页面地址
		if(awardType === 0){	// 卡券
			jumpUrl = `/pageUser/myCoupon/viewInfo?fansAwardId=${fansAwardId}&couponId=${awardId}`
		}else if(awardType === 1){	// 实物
			jumpUrl = '/pageUser/myAward/viewInfo?fansAwardId=' + fansAwardId + '&goodsId=' + awardId
		}else if(awardType === 3){	// 福分
			jumpUrl = '/pageUser/scoreRecords/index'
		}
		uni.navigateTo({
			url: jumpUrl
		})
	}
</script>

<style lang="less" scoped>
	.container{
		background-color: #F7F8FC;
		width: 100%;
		min-height: 100vh;
		.inner{
			padding: 40rpx 32rpx;
			.award-list{
				display: flex;
				flex-wrap: wrap;
				gap: 40rpx;
				.award-item{
					width: 100%;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					gap: 12rpx;
					padding: 24rpx 12rpx;
					box-sizing: border-box;

					.award-img{
						width: 145rpx;
						height: 120rpx;
					}
					
					.desc{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.award-name{
							font-weight: 500;
							
						}
						.award-time{
							font-size: 28rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>